<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>3D抽奖系统</title>
    <style>
        body {
            margin: 0;
            overflow: hidden;
            font-family: Arial, sans-serif;
        }
        #container {
            position: absolute;
            width: 100%;
            height: 100%;
        }
        #options {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: 10;
            text-align: center;
        }
        button {
            padding: 10px 20px;
            margin: 10px;
            font-size: 16px;
            cursor: pointer;
        }
        #flower {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%) scale(1);
            z-index: 5;
            display: none;
            font-size: 100px;
            animation: grow 1s cubic-bezier(0.68, -0.55, 0.27, 1.55) forwards;
            transition: transform 0.3s ease;
        }
        #flower:hover {
            transform: translate(-50%, -50%) scale(1.2);
        }
        @keyframes grow-on-click {
            0% { transform: translate(-50%, -50%) scale(1); }
            50% { transform: translate(-50%, -50%) scale(1.2); }
            100% { transform: translate(-50%, -50%) scale(1); }
        }
        @keyframes grow {
            0% { transform: translate(-50%, -50%) scale(0.1); }
            50% { transform: translate(-50%, -50%) scale(1.2); }
            100% { transform: translate(-50%, -50%) scale(1); }
        }
        #flower-text {
            position: absolute;
            top: 60%;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: 5;
            display: none;
            font-size: 20px;
            color: white;
            text-align: center;
        }
    </style>
</head>
<body>
    <div id="container"></div>
    <div id="options">
        <h1>选择你最喜欢的：</h1>
        <button onclick="selectOption('动物')">动物</button>
        <button onclick="selectOption('植物')">植物</button>
        <button onclick="selectOption('美食')">美食</button>
    </div>
    <div id="flower">🌹</div>
    <div id="flower-text">你好，我是一朵玫瑰花</div>
    <script>
        const flower = document.getElementById('flower');
        let isDragging = false;
        let isDraggingEnabled = true;
        let offsetX, offsetY;
        let angle = 0;
        let swingDirection = 1;
        let damping = 0.1;

        // 摇摆动画函数
        function swing() {
            if (!isDragging) {
                angle += 0.2 * swingDirection * 0.5; // 增加摇摆幅度和damping值
                flower.style.transform = `translate(-50%, -50%) rotate(${angle}deg) scale(1.2)`;
                
                // 改变摇摆方向
                if (Math.abs(angle) > 15) { // 调整切换阈值
                    swingDirection *= -1;
                }
            }
            requestAnimationFrame(swing);
        }

        // 点击放大缩小功能
        flower.addEventListener('click', () => {
            flower.style.animation = 'grow-on-click 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55)';
            setTimeout(() => {
                flower.style.animation = '';
            }, 500);
        });

        // 添加触摸事件放大功能
        flower.addEventListener('touchstart', () => {
            flower.style.transform = 'translate(-50%, -50%) scale(1.2)';
        });

        flower.addEventListener('touchend', () => {
            flower.style.transform = 'translate(-50%, -50%) scale(1)';
        });

        // 启动摇摆动画
        swing();

        flower.addEventListener('mousedown', (e) => {
            if (!isDraggingEnabled) return;
            isDragging = true;
            offsetX = e.clientX - flower.getBoundingClientRect().left;
            offsetY = e.clientY - flower.getBoundingClientRect().top;
            flower.style.cursor = 'grabbing';
            e.preventDefault();
        });

        function updatePosition(e) {
            if (!isDragging) return;
            const x = e.clientX - offsetX;
            const y = e.clientY - offsetY;
            flower.style.left = `${x}px`;
            flower.style.top = `${y}px`;
            flower.style.transform = 'translate(0, 0) scale(1.2)';
        }

        document.addEventListener('mousemove', (e) => {
            requestAnimationFrame(() => updatePosition(e));
        });

        document.addEventListener('mouseup', () => {
            isDragging = false;
            flower.style.cursor = 'grab';
        });
    </script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
    <script>
        let scene, camera, renderer, particles = [];

        function init() {
            // 初始化Three.js场景
            scene = new THREE.Scene();
            camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
            camera.position.z = 30;

            renderer = new THREE.WebGLRenderer({ antialias: true });
            renderer.setSize(window.innerWidth, window.innerHeight);
            document.getElementById('container').appendChild(renderer.domElement);

            // 窗口大小调整适配
            window.addEventListener('resize', () => {
                camera.aspect = window.innerWidth / window.innerHeight;
                camera.updateProjectionMatrix();
                renderer.setSize(window.innerWidth, window.innerHeight);
            });

            animate(); // 启动动画循环
        }

        function selectOption(option) {
            document.getElementById('options').style.display = 'none';
            document.getElementById('flower').style.display = 'block';
            document.getElementById('flower-text').style.display = 'block';

            const flower = document.getElementById('flower');
            let damping = 0.1; // 初始阻尼
            let angle = 0;
            let swingDirection = 1;
            let isDragging = false;
            let startX = 0;
            let startY = 0;
            let flowerX = 0;
            let flowerY = 0;

            // 摇摆动画函数
            function swing() {
                if (!isDragging) {
                    angle += 0.05 * swingDirection * damping;
                    flower.style.transform = `translate(-50%, -50%) rotate(${angle}deg) translate(${flowerX}px, ${flowerY}px)`;
                    
                    // 改变摇摆方向
                    if (Math.abs(angle) > 10) {
                        swingDirection *= -1;
                    }
                }
                requestAnimationFrame(swing);
            }

            // 初始阻尼变化效果
            let initialDamping = 0;
            const initialDampingInterval = setInterval(() => {
                initialDamping += 0.02;
                damping = initialDamping;
                if (initialDamping >= 0.1) {
                    clearInterval(initialDampingInterval);
                }
            }, 100);

            // 启动摇摆动画
            swing();

            // 鼠标悬停时阻尼变大
            flower.addEventListener('mouseenter', () => {
                damping = 0.3;
            });

            // 鼠标离开时阻尼恢复
            flower.addEventListener('mouseleave', () => {
                damping = 0.1;
            });

            // 拖动逻辑
            flower.addEventListener('mousedown', (e) => {
                isDragging = true;
                startX = e.clientX;
                startY = e.clientY;
                flower.style.cursor = 'grabbing';
            });

            document.addEventListener('mousemove', (e) => {
                if (!isDragging) return;
                flowerX += e.clientX - startX;
                flowerY += e.clientY - startY;
                startX = e.clientX;
                startY = e.clientY;
                flower.style.transform = `translate(-50%, -50%) rotate(${angle}deg) translate(${flowerX}px, ${flowerY}px)`;
            });

            document.addEventListener('mouseup', () => {
                if (isDragging) {
                    isDragging = false;
                    flower.style.cursor = 'grab';
                    
                    // 检查是否远离视角（假设原点为0,0）
                    const distance = Math.sqrt(flowerX * flowerX + flowerY * flowerY);
                    if (distance > 200) {
                        // 平滑回到原点
                        const returnInterval = setInterval(() => {
                            flowerX *= 0.9;
                            flowerY *= 0.9;
                            flower.style.transform = `translate(-50%, -50%) rotate(${angle}deg) translate(${flowerX}px, ${flowerY}px)`;
                            if (Math.abs(flowerX) < 1 && Math.abs(flowerY) < 1) {
                                clearInterval(returnInterval);
                                flowerX = 0;
                                flowerY = 0;
                            }
                        }, 16);
                    }
                }
            });

            // 创建持续播放的烟花效果
            createFireworks();
            setInterval(createFireworks, 1000); // 每秒生成一次烟花
        }

        function createFireworks() {
            const explosionHeight = Math.random() * 10 + 5; // 随机爆炸高度
            const explosionSize = Math.random() * 10 + 5; // 随机爆炸范围

            for (let i = 0; i < 50; i++) {
                const particle = new THREE.Mesh(
                    new THREE.SphereGeometry(0.2, 16, 16),
                    new THREE.MeshBasicMaterial({ color: Math.random() * 0xffffff })
                );
                particle.position.set(
                    Math.random() * explosionSize - explosionSize / 2,
                    explosionHeight + Math.random() * 5,
                    Math.random() * explosionSize - explosionSize / 2
                );
                particle.userData.velocity = new THREE.Vector3(
                    Math.random() * 2 - 1,
                    Math.random() * 2 - 1,
                    Math.random() * 2 - 1
                );
                particle.userData.lifetime = 0; // 初始化生命周期
                scene.add(particle);
                particles.push(particle);
            }
        }

        function animate() {
            requestAnimationFrame(animate);

            // 更新粒子位置和生命周期
            for (let i = particles.length - 1; i >= 0; i--) {
                const particle = particles[i];
                particle.position.add(particle.userData.velocity);
                particle.userData.velocity.y -= 0.02; // 增加重力效果
                particle.userData.lifetime++;

                // 移除超出生命周期或屏幕范围的粒子
                if (particle.userData.lifetime > 100 || particle.position.y < -20) {
                    scene.remove(particle);
                    particles.splice(i, 1);
                }
            }

            renderer.render(scene, camera);
        }

        // 初始化
        init();
    </script>
</body>
</html>